import React from './react/react'
import ReactDOM, { useState } from './react/react-dom'
import Component from './react/react-component'
import './index.css'
class ClassCMP extends Component {
  render() {
    const { name } = this.props
    return (
      <div>
        i am {name}
        <button onClick={() => alert("Hi~!")}>click</button>
      </div>
    )
  }
}

function FnCmp({ name }) {
  const [count, setCount] = useState(0)
  const obj = count % 2 ? { className: 'red' } : { onClick: () => console.log('clicked!') }
  return <div>
    <p>i am {name}</p>
    <>
      <span>fragment</span>
    </>
    <h2>{count}</h2>
    <button onClick={() => setCount(count + 1)}>+</button>
    <button onClick={() => setCount(count - 1)}>-</button>
    <h1 {...obj}>{count % 2 ? 'disable' : 'click me print log'}</h1>
    <div className="green">
      {count % 2 ? <button>even</button> : <div>odd</div>}
    </div>
  </div>
}

const el = <div>
  <h1 className="red">hello react</h1>
  <a href="www.baidu.com">百度</a>
  <div>
    <span>co</span>
  </div>
  <ClassCMP name='Class Component' />
  <FnCmp name='Function Component' />
</div>

ReactDOM.render(el, document.getElementById('root'));